<template>
  <div class="container">
    <!--    图片区域-->
    <div>
      <img src="@/assets/imgs/forum.png" style="width: 100%;height: 100%">
    </div>

    <!--           面包屑区域-->
    <div class="breadcrumb-and-rank">
      <el-breadcrumb separator-class="el-icon-arrow-right" style="margin: 20px 30px">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: $route.path }">{{ $route.meta.name }}</el-breadcrumb-item>
      </el-breadcrumb>

    </div>

    <el-Divider></el-Divider>

    <!--    公告区域-->
    <div style="display: flex; margin-top: 20px;margin-left: 10px">


      <!--    评论区域-->
      <div class="card" style="display: flex; flex-direction: column; align-items: center;width: 100%">
        <!-- 按钮和选择框区域 -->
        <div style="display: flex; align-items: center; width: 60%;">
          <div style="margin: 10px 10px;">
            <el-button type="success" plain>最新</el-button>
            <el-button type="success" plain>热门</el-button>
            <el-button type="success" plain>精品</el-button>
            <el-button type="success" plain>推荐</el-button>
            <el-button type="primary" plain>发表</el-button>
          </div>
          <el-select v-model="selectedValue" style="margin-left: auto;">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>

        <!-- 评论列表区域 -->
        <div v-for="(item, i) in comment" :key="i" style="margin-top: 20px; width: auto; display: flex; margin-bottom: 10px; box-shadow: 6px 6px 6px 6px rgba(0,0,0,0.1); padding: 8px 13px;">
          <img :src="item.img" style="width: 50px; height: 50px; margin-right: 10px; border-radius: 50%;margin-top: 10px">
          <div style="display: flex; flex-direction: column; justify-content: space-between; height: 100%; margin: 12px 6px;">
            <div style="display: flex; align-items: center;margin: 6px 5px">
              <span style="color: lightgreen;">{{ item.name }}</span>
              <span style="margin-left: 10px;">{{ item.time }}</span>
              <span style="margin-left: 10px;">{{ item.place }}</span>
            </div>
            <span style="margin: 6px 0;font-size: 20px;font-weight: bold">{{ item.title }}</span>

            <div style="display: flex; align-items: center; justify-content: space-between; margin: 6px 0;">
              <span style="font-size: 17px;">{{ item.content }}</span>

              <!--            回复评论按钮-->
              <el-button type="success" plain icon="el-icon-chat-line-round" style="margin-left: 330px;">回复</el-button>
            </div>

            <!--        回复区域-->
            <div v-for="(item, i) in reply" :key="i"
                 style="margin-top: 20px;margin-bottom: 10px;margin-left: 25px;display: flex; align-items: center; box-shadow: 6px 6px 6px 6px rgba(0,0,0,0.1); padding: 8px 13px;">
              <img :src="item.img" style="width: 50px; height: 50px; margin-right: 10px; border-radius: 50%;">
              <div style="display: flex; flex-direction: column; justify-content: space-between; height: 100%; margin: 12px 6px;">
                <div style="display: flex; align-items: center;margin: 6px 5px">
                  <span style="color: lightgreen;">{{ item.name }}</span>
                  <span style="margin-left: 10px;">{{ item.time }}</span>
                  <span style="margin-left: 10px;">{{ item.place }}</span>
                </div>
                <span style="margin: 6px 0;font-size: 17px">{{ item.content }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--    分页区域-->
    <div class="pagination" style="display: flex; justify-content: flex-end;margin: 25px 0">
      <el-pagination background @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[5, 10, 20]"
                     :page-size="pageSize" layout="total, prev, pager, next" :total="total"></el-pagination>
    </div>

  </div>
</template>

<script>
export default {
  name: "Forum",
  data() {
    return {
      tableData: [],  // 所有的数据
      pageNum: 1,   // 当前的页码
      pageSize: 10,  // 每页显示的个数
      total: 36,
      // 绑定到select的变量，初始值设置为options数组中的某个值
      selectedValue: '按时间发布顺序',
      options: [{
        value: '按时间发布顺序',
        label: '按时间发布顺序'
      }, {
        value: '按浏览量顺序',
        label: '按浏览量顺序'
      }
      ],
      comment: [
        {
          img: '',
          name: 'badada',
          time: '06月24日 22:21',
          place: '重庆',
          content: 'office2013能装在win7系统里面吗？要能正常运行的',
          title: 'office安装'
        },
        {
          img: '',
          name: 'badada',
          time: '06月24日 22:21',
          place: '重庆',
          content: 'office2013能装在win7系统里面吗？要能正常运行的',
          title: 'office安装'
        },
        {
          img: '',
          name: 'badada',
          time: '06月24日 22:21',
          place: '重庆',
          content: 'office2013能装在win7系统里面吗？要能正常运行的',
          title: 'office安装'
        },
        {
          img: '',
          name: 'badada',
          time: '06月24日 22:21',
          place: '重庆',
          content: 'office2013能装在win7系统里面吗？要能正常运行的',
          title: 'office安装'
        },
        {
          img: '',
          name: 'badada',
          time: '06月24日 22:21',
          place: '重庆',
          content: 'office2013能装在win7系统里面吗？要能正常运行的',
          title: 'office安装'
        },
        {
          img: '',
          name: 'badada',
          time: '06月24日 22:21',
          place: '重庆',
          content: 'office2013能装在win7系统里面吗？要能正常运行的',
          title: 'office安装'
        }
      ],
      reply: [
        {
          img: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.qCys2C8LjF8c3_UHbGOooAAAAA?rs=1&pid=ImgDetMain',
          name: '哈哈哈',
          time: '06月24日 22:21',
          place: '重庆',
          content: '当然可以',
        },
        {
          img: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.qCys2C8LjF8c3_UHbGOooAAAAA?rs=1&pid=ImgDetMain',
          name: '哈哈哈',
          time: '06月24日 22:21',
          place: '重庆',
          content: '当然可以',
        }
      ],
      notices: [],
    }
  },
  created() {
    // this.$request.get('/notice/selectAll').then(res => {
    //   this.notices = res.data || []
    // })
  },
  methods: {
    handleCurrentChange(pageNum) {
      this.load(pageNum)
    },
  },
}
</script>

<style scoped>
.container {
  width: 1200px; /* 设置最大宽度 */
  margin: 0 auto; /* 居中显示 */
  background-color: white
  /* 可以添加更多样式，如padding, background等 */
}
</style>